<template>
  <div class="doctor-review-page">
    <el-card>
      <div class="toolbar">
        <el-select v-model="selectedDoctor" placeholder="选择医生" class="filter-select">
          <el-option v-for="d in doctors" :key="d.id" :label="d.name" :value="d.id" />
        </el-select>
        <el-input v-model="search" placeholder="搜索评价内容/患者名" class="search-input" clearable />
      </div>
      <el-table :data="filteredReviews" style="width:100%" border>
        <el-table-column prop="patient" label="患者" width="120" />
        <el-table-column prop="content" label="评价内容" />
        <el-table-column prop="score" label="评分" width="100">
          <template #default="{ row }">
            <el-rate v-model="row.score" disabled show-score />
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="160" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="reply(row)">回复</el-button>
            <el-button size="small" type="danger" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="replyVisible" title="回复评价" width="400px">
      <el-input v-model="replyContent" type="textarea" placeholder="请输入回复内容" />
      <template #footer>
        <el-button @click="replyVisible=false">取消</el-button>
        <el-button type="primary" @click="handleReply">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const doctors = ref([
  { id: '1', name: '李明' },
  { id: '2', name: '王芳' }
])
const reviews = ref([
  { id: 1, doctorId: '1', patient: '张三', content: '医生很专业，态度好', score: 5, date: '2024-05-01' },
  { id: 2, doctorId: '2', patient: '李四', content: '解答细致', score: 4, date: '2024-05-02' }
])
const selectedDoctor = ref('')
const search = ref('')
const replyVisible = ref(false)
const replyContent = ref('')
const replyRow = ref<any>(null)
const filteredReviews = computed(() => {
  let arr = reviews.value
  if (selectedDoctor.value) arr = arr.filter(r => r.doctorId === selectedDoctor.value)
  if (search.value) arr = arr.filter(r => r.content.includes(search.value) || r.patient.includes(search.value))
  return arr
})
function reply(row:any) {
  replyRow.value = row
  replyContent.value = ''
  replyVisible.value = true
}
function handleReply() {
  replyVisible.value = false
}
function del(row:any) {
  reviews.value = reviews.value.filter(r => r.id !== row.id)
}
</script>
<style scoped>
.doctor-review-page {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.filter-select {
  width: 140px;
}
.search-input {
  width: 200px;
}
</style> 